<template>
  <div class="table-box" v-loading="loading.value">
    <div class="top-buttons">
      <div>
        类型：
        <el-select
          v-model="typeId"
          placeholder="Select"
          style="width: 240px"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="flex-block"></div>
      <el-button type="primary" @click="loadData">搜索</el-button>
      <el-button type="primary" @click="onAddClick">新增</el-button>
    </div>
    <AgGrid
      ref="agGridRef"
      :columns="columns"
      v-model="list"
      @handle="onHandle"
    />
    <div class="bottom-buttons">
      <el-button type="success" @click="onSaveClick">保存</el-button>
      <el-button v-if="false" type="info">历史记录</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";

import AgGrid from "@/components/ag-grid/index.vue";

import FieldVO from "@/bean/vo/FieldVO";
import OptionVO from "@/bean/vo/OptionVO";
import AgColumn from "@/bean/vo/AgColumn";

import TypeApi from "@/api/setting/type";
import FieldApi from "@/api/setting/field";

import parseNumber from "@/methods/parseNumber";
import Loading from "@/utils/Loading";

const $route = useRoute();

const agGridRef = ref<InstanceType<typeof AgGrid>>();

const columns = ref<AgColumn<FieldVO>[]>([
  {title: '名称', field: 'name', type: 'text', editable: true},
  {title: '显示名称', field: 'displayName', type: 'text', editable: true},
  {title: '渲染类型', field: 'renderType', type: 'select', editable: true},
  {title: '必填规则', field: 'requiredRule', type: 'text', editable: true},
  {title: '编辑规则', field: 'editRule', type: 'text', editable: true},
  {title: '操作', type: 'buttons', buttons: [
    {title: '删除', type: 'danger', size: 'small', eventType: 'delete'},
  ]},
]);

const typeId = ref<number>(parseNumber($route.query.typeId));
const typeOptions = ref<OptionVO[]>([]);

const loading = reactive(new Loading());

const list = ref<Partial<FieldVO>[]>([]);

function onHandle(eventType: string, data: FieldVO) {
  if (eventType === 'delete') {
    onDeleteClick(data);
  }
}

function loadTypeOptions() {
  return loading.execute(async() => {
    const list = await TypeApi.getList();
    typeOptions.value = list.map(item => ({
      label: item.displayName,
      value: item.id
    }))
  });
}

function loadData() {
  if (!typeId.value) {
    list.value = [];
    agGridRef.value.clear();
    return;
  }
  return loading.execute(async() => {
    list.value = await FieldApi.getList(typeId.value);
    agGridRef.value.clear();
  });
}

function onAddClick() {
  agGridRef.value.add();
}

function onSaveClick() {
  return loading.execute(async() => {
    await FieldApi.save(agGridRef.value.getSubmitRows());
    ElMessage.success('保存成功');
    await loadData();
  });
}

function onDeleteClick(data: FieldVO) {
  agGridRef.value.remove(data);
}

onMounted(() => {
  loadTypeOptions();
  loadData();
});
</script>

<style scoped>
.table-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.top-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.flex-block {
  flex: 1;
  min-width: 20px;;
}
.bottom-buttons {
  margin-top: 10px;
}
</style>
